import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, List, Avatar, Typography, Space, Divider, Skeleton } from 'antd';
import { DollarOutlined } from '@ant-design/icons';
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';

const { Title } = Typography;

export default function Sell() {
    const navigate = useNavigate();
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(true);
     const back=()=>{
        navigate('/my')
    }
    const getData = () => {
        setLoading(true);
        axios.get("http://127.0.0.1:3000/sell?id=" + JSON.parse(localStorage.getItem('user')))
            .then(res => {
                setList(res.data.zhong);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };

    useEffect(() => {
        getData();
    }, []);

    return (
        <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
            <NavBar onBack={back}>我卖出的</NavBar>
            <Title level={2} style={{ textAlign: 'center', marginBottom: '30px' }}>
                我卖出的商品
            </Title>
            
            {loading ? (
                <Skeleton active paragraph={{ rows: 4 }} />
            ) : list.length === 0 ? (
                <Card style={{ textAlign: 'center' }}>
                    <Title level={4}>您还没有卖出任何商品</Title>
                    <p>快去发布商品吧！</p>
                </Card>
            ) : (
                <List
                    grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
                    dataSource={list}
                    renderItem={item => (
                        <List.Item>
                            <Card
                                hoverable
                                cover={
                                    <div style={{ height: '200px', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                        <img 
                                            alt={item.title} 
                                            src={item.img[0].url} 
                                            style={{ width: '100%', objectFit: 'cover' }}
                                        />
                                    </div>
                                }
                            >
                                <Card.Meta
                                    title={item.title}
                                    description={
                                        <Space direction="vertical">
                                            <Divider style={{ margin: '8px 0' }} />
                                            <div style={{ color: '#ff4d4f', fontWeight: 'bold' }}>
                                                <DollarOutlined /> {item.price} 元
                                            </div>
                                            <div style={{ color: '#888', fontSize: '12px' }}>
                                                已售出
                                            </div>
                                        </Space>
                                    }
                                />
                            </Card>
                        </List.Item>
                    )}
                />
            )}
        </div>
    );
}